<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <script th:src="@{/js/vue/vue.js}"></script>
    <th:block th:include="include :: header('影视列表')"/>
</head>
<style>
    .selectButten {
        width: 72px;
        border: none;
        height: 100%;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #c5464a;
        border-radius: 0px 19px 19px 0px;
        color: white
    }
    .homeTitle {
        /*padding-top: 17%;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        text-align: center;
        font-size: 160px;
        font-weight: 1000;
        text-shadow: 1px 0px #990000, 1px 2px #660000, 3px 1px #990000,
        2px 3px #660000, 4px 2px #990000, 4px 4px #660000,
        5px 3px #990000, 5px 5px #660000, 7px 4px #990000,
        6px 6px #660000, 8px 5px #990000, 7px 7px #660000,
        9px 6px #990000, 9px 8px #660000, 11px 7px #990000;
    }

    /* 增大输入框大小 */
    input[type="checkbox"] {
        transform: scale(1.5); /* 可以根据需要调整缩放比例 */
        accent-color: #c5464a; /* 设置选中颜色 */
        margin-right: 5px; /* 增加输入框和文字之间的间距 */
    }

    /* 去除输入框默认的外边距 */
    input[type="checkbox"]:first-of-type {
        margin-left: 0;
    }

    /* 为 label 添加一些样式，使其更具交互性 */
    label {
        cursor: pointer;
    }

    .myForm {
        /* 放大 1.5 倍，可按需调整 */
        transform: scale(1.01);
        /* 设定缩放的起始点 */
        transform-origin: top left;
    }

    * {
        box-sizing: border-box; /*宽度和高度会包括内边距和边框*/
    }

    div.search {
        padding: 10px 0;
    }

    .myForm {
        position: relative;
        width: 900px;
        margin: 0 auto; /*设置宽度后，居中*/
    }

    input, button {
        border: none; /*无边框样式；元素的总宽度和高度包括边框的宽度 */
        outline: none; /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
    }

    .search input {
        width: 100%;
        height: 42px;
        padding-left: 13px;
        border: 2px solid #c5464a;
        border-radius: 19px 0px 0px 19px; /*border-radius 属性用于向元素添加圆角边框：*/
        background: transparent; /*背景透明*/
    }

    .search button {
        height: 42px;
        width: 42px;
        cursor: pointer; /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
        position: absolute;
        background: #c5464a;
        border-radius: 0 19px 19px 0;
        width: 60px;
        right: 0;
    }

    .search button:hover {
        background-color: #c7585c; /*点击搜索按钮时的背景颜色*/
    }

    /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
    .search button:before {
        content: "搜索"; /*插入的内容*/
        font-size: 13px; /*插入内容的字体大小*/
        color: #F9F0DA; /*插入内容的字体颜色*/
    }


    /*.menu{*/
    /*    color: white;*/
    /*    background-color: rgba(5, 5, 5, 0.85);*/
    /*    width: 99%;*/
    /*    position: fixed;*/
    /*    height: 10%;*/

    /*}*/
    .menu {
        font-weight: bold;
        color: white;
        font-size: 30px;
        background-color: rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 7% /* 让 .menu 容器占满整个视口高度 */
    }

    .menu > div {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .menu > div > div {
        margin: 0 80px; /* 为子元素添加左右间距 */
    }

    .menu > div > div {
        margin: 0 80px;
        color: white;
        cursor: pointer; /* 鼠标悬停时显示指针样式 */
    }

    .menu > div > div:hover {
        font-weight: bold;
        color: #734000;
    }
</style>
<body class="gray-bg">

<div id="home" class="home"
     style="background-color: #e6a44c;height: 100vh;width: 100%;margin: 0;padding: 0;position: absolute;top: 0;right: 0;left: 0;bottom: 0">


    <!-- 菜单 -->
    <div class="menu">
        <div style="display: flex;
        top: -1%;
            text-align: center;
            justify-content: center;
            align-items: center;">
            <div class="goToMyPage" data-target="homepage" @click="getoHome()"> 首页</div>
            <div @click="goToliterature('')">文献数据库</div>
            <div @click="goToFilmDate()">影视信息库</div>
            <div @click="goToAboutMe()">关于我们</div>
        </div>
    </div>

    <div style="padding-left:7%;padding-right: 7%;background-color: #e6a44c;height: 100% ;overflow: hidden">
        <!--标题 -->
        <div id="targetDiv" style="padding-top:18%;margin-bottom:10px;display: flex;align-items: center;justify-content: center;flex-direction: column;background-color: #e6a44c">
            <!--            <div style="color: red;font-size: 30px;font-weight: bold">中国共产党人精神谱系</div>-->
            <!--            <div style="color: red;font-size: 30px;font-weight: bold">影视信息库</div>-->

            <!-- 首页 -->
            <div class="homepage" id="homepage">
                <div class="homeTitle">
                    <div style="font-size: 35px;letter-spacing: 10px;margin-top: 3%;margin-bottom: 2%">中国共产党人精神谱系</div>
                    <div style="font-size: 45px;letter-spacing: 10px;margin-bottom: 5%">影视信息库</div>
                </div>
            </div>


        </div>
        <div>
            <form id="searchForm" style="background-color: #e6a44c;padding-top: 20px;padding-bottom: 20px;">
                <div style="margin-bottom: 10px;font-size:25px;">
                    <div class="search">
                        <div class="myForm" style="font-size:25px;display: flex;">
                            <input style="font-size:25px;background-color: white" placeholder="请输入..." name="keyword" type="text">
                            <div style="width:72px;" id="loadPapersBtn">
                                <div style="" class="selectButten" onclick="selectFilm()">搜索</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;font-size: 21px;font-weight: bold">
                    <div>
                        <label style="font-weight: bold">
                            <input type="checkbox" value="电影" name="filmType"> 电影
                        </label>
                        <label style="font-weight: bold">
                            <input type="checkbox" value="电视剧" name="filmType"> 电视剧
                        </label>
                    </div>
                    <div style="margin-left: 40px;border-left: 2px solid #0b0b0b;padding-left: 50px">
                        <label style="font-weight: bold">
                            <input style="margin-left: 0px" type="checkbox" value="4" name="filmTime"> 伟大建党精神
                        </label>
                        <label style="font-weight: bold">
                            <input style="margin-left: 20px" type="checkbox" value="0" name="filmTime"> 新民主主义革命时期
                        </label>
                        <label style="font-weight: bold">
                            <input style="margin-left: 20px" type="checkbox" value="1" name="filmTime"> 社会主义革命和建设时期
                        </label>
                        <label style="font-weight: bold">
                            <input style="margin-left: 20px" type="checkbox" value="2" name="filmTime"> 改革开放和社会主义现代化建设新时期
                        </label>
                        <label style="font-weight: bold">
                            <input style="margin-left: 20px" type="checkbox" value="3" name="filmTime"> 中国特色社会主义新时代
                        </label>
                    </div>
                </div>
            </form>
        </div>


        <!-- 影视列表 -->
        <div id="myFilmTable" style="padding-right: 0%;padding-left: 8%;padding-top: 3%;background-color: #ffffff ;height: 50%;overflow-y: scroll;display: none;">

            <div style=" display: flex;     flex-wrap: wrap;gap: 20px; " id="myFilmTableItem">
<!--                <div v-for="(item, index) in selectFilmDate"-->
<!--                     style="color: black;box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.3);margin-right: 20px">-->
<!--                    &lt;!&ndash; 每一部影视 &ndash;&gt;-->
<!--                    <div style="height: 100%;background-color: #ccccc7; width: 140px;" @click="goToFilmDetail(item.id)" >-->
<!--                        <div style="width: 100%; height: 170px;position: relative;">-->
<!--                            <img :src="item.img" alt="影视海报" style="height: 100%; width: 100%; object-fit: cover;">-->
<!--                            <span v-if="item.kind == 0"-->
<!--                                  style="position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 2px 5px;">电影</span>-->
<!--                            <span v-if="item.kind == 1"-->
<!--                                  style="position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 2px 5px;">电视剧</span>-->
<!--                        </div>-->
<!--                        <div style="text-align: center;padding-top: 1%">-->
<!--                            《{{item.tvSeries}}》-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
        </div>

    </div>


</div>
</body>
<!-- 通用JS -->
    <script th:inline="javascript"> var ctx = [[@{/}]]; var lockscreen = [[${session.lockscreen}]]; if(lockscreen){window.top.location=ctx+"lockscreen";} </script>

    <script th:src="@{/js/jquery.min.js?v=3.6.3}"></script>
<script th:inline="javascript">

    $(function () {
        // const div = document.getElementById('myFilmTable');
        // div.style.display = 'none';
        const div = document.getElementById('myFilmTable');
        var targetDiv = document.getElementById('targetDiv');

        // 修改 padding-top 样式
        targetDiv.style.paddingTop = '18%';
        div.style.display = 'none';
    })

    function getDate () {
        const div = document.getElementById('myFilmTable');
        div.style.display = 'block';
    }
    var selectFilmDate = [];
    function selectFilm() {
        // const div = document.getElementById('myFilmTable');
        // div.style.display = 'block';
        // var targetDiv = document.getElementById('targetDiv');
        //
        // // 修改 padding-top 样式
        // targetDiv.style.paddingTop = '5%';
        const div = document.getElementById('myFilmTable');
        div.style.display = 'block';
        var targetDiv = document.getElementById('targetDiv');

        // 修改 padding-top 样式
        targetDiv.style.paddingTop = '5%';
        // this.isShowTheTable = true

        // 收集表单数据
        // const formData = {
        //     keyword: this.keyword,
        //     filmType: this.selectedFilmType,
        //     periods: this.selectedPeriods
        // };
        // 打印表单数据，你可以在这里进行后续操作，如发送请求等
        // console.log(formData);
        // 获取表单元素
        const form = document.getElementById('searchForm');

        // 获取输入框的值
        const keyword = form.querySelector('input[name="keyword"]').value;

        // 获取电影类型复选框的值
        const filmTypeCheckboxes = form.querySelectorAll('input[name="filmType"]');
        const selectedFilmType = [];
        filmTypeCheckboxes.forEach(checkbox => {
            if (checkbox.checked) {
                selectedFilmType.push(checkbox.value);
            }
        });

        // 获取时期复选框的值
        const periodCheckboxes = form.querySelectorAll('div:nth-child(2) input[name="filmTime"]');
        const selectedPeriods = [];
        periodCheckboxes.forEach(checkbox => {
            if (checkbox.checked) {
                selectedPeriods.push(checkbox.value);
            }
        });

        // 收集表单数据
        const formData = {
            keyword: keyword,
            filmType: selectedFilmType,
            periods: selectedPeriods
        };

        console.log(formData);

        // 拼接 URL 并对 id 参数进行编码
        const url = ctx + "front/film/selectFilm";
        $.ajax({
            url: url,
            type: "post",
            data: formData,
            success: function(result) {
                // 清空原有的影视列表
                $('#myFilmTableItem').empty();

                // 遍历返回的数据并插入到页面中
                $.each(result, function(index, item) {
                    const filmDiv = `
                                <div style="color: black;box-shadow: 20px 20px 10px rgba(0, 0, 0, 0.3);margin-right: 20px">
                                    <div style="height: 100%;background-color: #ccccc7; width: 140px;" onclick="goToFilmDetail(${item.id})">
                                        <div style="width: 100%; height: 180px;position: relative;">
                                            <img src="${item.img}" alt="影视海报" style="height: 100%; width: 100%; ">
                                            <span ${item.kind === '0' ? 'style="position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 2px 5px;">电影' : ''}></span>
                                            <span ${item.kind === '1' ? 'style="position: absolute; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 2px 5px;">电视剧' : ''}></span>
                                        </div>
                                        <div style="text-align: center;padding-top: 1%">
                                            《${item.tvSeries}》
                                        </div>
                                    </div>
                                </div>
                            `;
                    $('#myFilmTableItem').append(filmDiv);
                });
            },
            error: function(error) {
                console.error('请求出错:', error);
            }
        });
        console.log(selectFilmDate)

    }
    //跳转影视详情
    function goToFilmDetail(id) {
        window.location.href = "/front/goToFilmDetail?id=" + encodeURIComponent(id);
    }
    new Vue({
        el: '#home',
        data: {
            message: 'Hello, Vue!',
            searchTermsOfBox: [], // 小标题的搜索词 - 弹出框的全文搜索词
            keyword: '', // 输入框的值
            selectedFilmType: [], // 单选框选中的值
            selectedPeriods: [], // 复选框选中的值
            selectFilmDate: [],
            isShowTheTable:false
        },
        methods: {
          selectFilm() {
        // const div = document.getElementById('myFilmTable');
        // div.style.display = 'block';
        // var targetDiv = document.getElementById('targetDiv');
        //
        // // 修改 padding-top 样式
        // targetDiv.style.paddingTop = '5%';
        const div = document.getElementById('myFilmTable');
        div.style.display = 'block';
        var targetDiv = document.getElementById('targetDiv');

        // 修改 padding-top 样式
        targetDiv.style.paddingTop = '5%';
        // this.isShowTheTable = true

        // 收集表单数据
        const formData = {
            keyword: this.keyword,
            filmType: this.selectedFilmType,
            periods: this.selectedPeriods
        };
        // 打印表单数据，你可以在这里进行后续操作，如发送请求等
        console.log(formData);
        const vm = this;

        // 拼接 URL 并对 id 参数进行编码
        const url = ctx + "front/film/selectFilm";
        $.ajax({
            url: url,
            type: "post",
            data: formData,
            success: function (result) {
                vm.selectFilmDate = result;

            }
        })


    },
            //跳转影视详情
            goToFilmDetail(id) {
                window.location.href = "/front/goToFilmDetail?id=" + encodeURIComponent(id);
            },
            //调整文献数据库
            goToliterature(searchTerms) {
                window.location.href = "/front/goToliterature?searchTerms=" + encodeURIComponent(searchTerms) + "&key=0";
            },
            getoHome() {
                window.location.href = "/";
            },
            goToAboutMe() {
                window.location.href = "/front/goToAboutMe";
            },

            getFilmDate(){
                const div = document.getElementById('myFilmTable');
                var targetDiv = document.getElementById('targetDiv');

                // 修改 padding-top 样式
                targetDiv.style.paddingTop = '18%';
                div.style.display = 'none';
            }

        },
        mounted() {

        },
        created() {
            // this.getFilmDate()
            // this.getFilmDate()
        }
    });
</script>

</html>